<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link
						to="/portal/index">首页</router-link></a> > <a><router-link
						to="/portal/net">网谷里</router-link></a>><a>代表风采</a>
				<a href="" class="back"><img src="../../../assets/img/back.png" alt=""><router-link
						to="/portal/net">返回上一级</router-link></a>
			</div>
		</div>
		<div class="inner">
			<div class="net w1200">
				<h3>代表风采</h3>
				<div class="pic-list">
					<div class="tab-bar">
						<div class="tab" v-for="item in StreetInfo" :class="{ 'active': item.checked }"
							@click="goStreetItem(item.id)">{{ item.streetName }}代表小组</div>
					</div>
					<div class="img-list">
						<div class="item" v-for="item in RepList">
							<div class="tips"><span></span>区人大代表</div>
							<img :src="item.address" alt="">
							<div class="name">{{ item.name }}</div>
							<div class="position">{{ item.job }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { getRepList } from "@/api/website";
import {listStreetInfo, listStreetInfoAll} from "@/api/StreetInfo/StreetInfo";

export default {
	data() {
		return {
			StreetInfo: [],
			RepList: []
		}
	},
	components: {
		Header,
		Contact
	},
	created() {
		this.init();
	},
	mounted() {

	},
	methods: {
		init() {
      listStreetInfoAll('').then(response => {
				this.StreetInfo = response;
				this.StreetInfo[0].checked = true;
				this.getPicList(this.StreetInfo[0].id)
			});

		},
		getPicList(id) {
			getRepList({ id: id }).then(response => {
				this.RepList = response
			});
		},
		goStreetItem(id) {
			for (const key in this.StreetInfo) {
				if (this.StreetInfo[key].id == id) {
					this.StreetInfo[key].checked = true;
				} else {
					this.StreetInfo[key].checked = false;
				}
			}
			this.getPicList(id)
		}
	}

};
</script>

<style scoped lang="scss"></style>
